<template>
  <div class="page-content">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>数据配置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="inner-box">
        <div class="head">
          <h4 class="content-title">配置列表</h4>
        </div>
        <el-form :inline="true" :model="formSearch" class="mt-10" ref="searchForm">
          <el-form-item label="配置名称" prop="classKey">
            <el-input v-model="formSearch.name" clearable placeholder="请输入关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getDatas" icon="el-icon-search">查询</el-button>
            <el-button type="default" icon="el-icon-close" @click="resetForm">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="showDialogForm('add')">添加配置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" stripe v-loading="loading" max-height="545">
          <el-table-column prop="keyDescribe" label="配置名称">
          </el-table-column>
          <el-table-column prop="classKey" label="配置Key">
          </el-table-column>
          <el-table-column label="操作" width="400px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain icon="el-icon-edit"
                @click="editData(scope.row)">编辑数据</el-button>
              <el-button size="mini" type="danger" @click="deleted(scope.row)" plain slot="reference"
                icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <list-pagination :pagination="pagination" @handleSizeChange="handlePage" @handleCurrentChange="handlePage">
        </list-pagination>
      </div>
    </div>
    <el-dialog :title="'添加配置'" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
        <el-form-item label="配置名称" prop="KeyDescribe">
          <el-input v-model="form.KeyDescribe" autocomplete="off" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="配置Key" prop="classKey">
          <el-input v-model="form.classKey" :disabled="mode == 'modify'" autocomplete="off" clearable
            placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      formSearch: {
        name: '',
      },
      tableData: [],
      initForm: {
        "classKey": "",
        "KeyDescribe": "",
        "values": "{}",
      },
      form: {},
      rules: {
        KeyDescribe: [
          { required: true, message: '请输入配置名称' },
        ],
        classKey: [
          { required: true, message: '请输入配置Key值' },
          {
            pattern: /^(\w){2,50}$/,
            message: '只能输入2-50个字母、数字、下划线',
          },
        ],
      },
      dialogVisible: false,
      selected: {},
      loading: false,
      formLabelWidth: '80px',
      pagination: {
        pageIndex: 1,
        pageSize: 15,
        totalCount: 0,
      },
      mode: "",
    }
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    handlePage(pagination) {
      this.pagination = Object.assign(this.pagination, pagination);
      this.getDatas();
    },
    getDatas() {
      let params = this.func.depCopy(Object.assign(this.formSearch, this.pagination));
      delete params.totalCount;
      this.loading = true;
      this.https("get", "/api/Values/GetClassKeyList", params).then(res => {
        this.tableData = res || [];
        this.loading = false;
      }).catch(res => {
        this.loading = false;
      })
    },
    showDialogForm(mode, item) {
      this.mode = mode;
      this.selected = item || null;
      if (mode == "add") {
        this.form = this.func.depCopy(this.initForm);
      } else {
        this.form = this.func.depCopy(item);
      }
      this.dialogVisible = true;
    },
    editData(item) {
      this.$router.push({ path: '/setting/config', query: { classKey: item.classKey } });
    },
    resetForm() {
      this.$refs["searchForm"].resetFields();
      this.getDatas();
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = this.form;
          if (this.tableData.find(item => item.classKey == params.classKey)) {
            this.func.message("error", `已存在${params.classKey}配置`);
            return;
          }
          this.loading = true;
          this.https("post", "/api/Values/SaveData", params).then(res => {
            this.loading = false;
            this.dialogVisible = false;
            this.getDatas();
          }).catch(() => {
            this.loading = false;
          })
        } else {
          return false;
        }
      });
    },
    deleted(item) {
      this.$confirm(`是否确定删除选中数据`, '操作消息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          classKey: item.classKey,
        }
        this.loading = true;
        this.https("get", "/api/Values/DeleteKey", params).then(res => {
          this.loading = false;
          this.getDatas();
        }).catch(() => {
          this.loading = false;
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.head {
  position: relative;

  .select-school {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>